<template>
    <div class="academic-db-container">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-input
          v-model="keyword"
          placeholder="请输入数据库名称进行搜索"
          prefix-icon="el-icon-search"
          clearable
          class="search-input"
        ></el-input>
      </div>
  
      <!-- 数据库卡片列表 -->
      <div class="db-grid">
        <el-card
          v-for="(item, i) in filteredData"
          :key="i"
          shadow="hover"
          class="db-card"
          @click.native="viewsche(i)"
        >

          <div class="card-header">
            <span class="db-id">ID: {{ item.dbid }}</span>
            
            <el-tag 
              :type="item.consistency === 1 ? 'success' : 'danger'" 
              class="consistency-tag"
            >
              {{ item.consistency === 1 ? '一致' : '不一致' }}
            </el-tag> 
          </div>
  
          <div class="card-body">
            <h3 class="db-name">{{ item.dbname }}</h3>
            <div class="metadata">
              <div class="meta-item">
                <i class="el-icon-folder-opened"></i>
                <span>创建时间: {{ formatDate(item.createtime) }}</span>
              </div>
             
            </div>
          </div>
  
          <div class="card-footer">
            <el-button 
              type="text" 
              icon="el-icon-view" 
              class="view-btn"
            >
              查看详情
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex';
  import { allindb } from '@/api/db';
  
  export default {
    name: 'AcademicDBList',
    created() {
      this.read();
     
    },
    computed: {
      ...mapGetters(['token']),
      filteredData() {
        if (!this.keyword) return this.dbData;
        return this.dbData.filter(item => 
          item.dbname.toLowerCase().includes(this.keyword.toLowerCase())
        );
      }
    },
    data() {
      return {
        dbData: [],
        keyword: ''
      };
    },
    methods: {
      read() {
        allindb().then(response => {
          this.dbData = response.data.db.map(db => ({
            ...db,
            
            createTime: db.createTime || new Date().toISOString(),
            creator: db.creator || '系统'
            
          })
        );
        }).catch(error => {
          console.error('数据库加载失败:', error);
          this.$message.error('数据库加载失败');
        });
      },
      viewsche(i) {
        this.$store.dispatch('user/setDBId', this.dbData[i].dbid)
          .then(() => this.$router.push('/CHECK/repair_checking'));
      },
      formatDate(dateStr) {
      if (!dateStr) return '未知';
      const date = new Date(dateStr);
      const dateString = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
      const timeString = date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
      return `${dateString} ${timeString}`;
    }
  
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .academic-db-container {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-bar {
    margin-bottom: 30px;
    
    .search-input {
      max-width: 400px;
      
      ::v-deep .el-input__inner {
        border-radius: 20px;
        padding-left: 40px;
        background-color: #f5f7fa;
        border: 1px solid #e4e7ed;
      }
    }
  }
  
  .db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .db-card {
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      .db-id {
        font-size: 14px;
        color: #909399;
      }
      
      .consistency-tag {
        border-radius: 12px;
        padding: 0 12px;
      }
    }
  
    .card-body {
      .db-name {
        margin: 0 0 15px;
        font-size: 20px;
        color: #303133;
        font-weight: 600;
      }
      
      .metadata {
        .meta-item {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 14px;
          color: #606266;
          
          i {
            margin-right: 8px;
            font-size: 16px;
            color: #409EFF;
          }
        }
      }
    }
  
    .card-footer {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #ebeef5;
      
      .view-btn {
        color: #409EFF;
        font-weight: 500;
        
        &:hover {
          color: #66b1ff;
        }
      }
    }
  }
  </style>